<template>
  <!-- v-pagePermissions="pagePermissions"  -->
 <el-card class="register mxauto">
    <h1 class="title">注册</h1>
   <el-form 
   ref="ruleFormRef"
   class="mt30"
    status-icon  :rules="rules"
     :model="ruleForm" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
         <el-form-item label="密码" prop="password">
      <el-input
        v-model="ruleForm.password"
        type="password"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="验证密码" prop="checkPass">
      <el-input
        v-model="ruleForm.checkPass"
        type="password"
        autocomplete="off"
      ></el-input>
    </el-form-item>
       <el-form-item label="邮箱" prop="email">
     <div class="aic">
          <el-input
            v-model="ruleForm.email"
          ></el-input>
          <el-button type="primary" @click="getCode" class="ml15">{{
                   codeText
          }}</el-button>
        </div>
    </el-form-item>
     <el-form-item label="验证码" prop="code">
      <el-input
        v-model="ruleForm.code"
        type="text"
      ></el-input>
    </el-form-item>
  </el-form>
    <el-button  class="w100" type="primary" @click="submitForm(ruleFormRef)">创建</el-button>
    <div  class="mt30"><el-link @click.native="handleGologin" type="primary" >登录</el-link></div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import type { ElForm } from 'element-plus'
import type {Response} from '/@ts/axios/index';
import useRegular from '/@ts/hooks/regular';
// import {userinfoAddUser,getEmailCode} from '/@ts/axios/urlApi/register';
let emit = defineEmits(['handleGologin'])

const handleGologin = () =>{
  emit('handleGologin',false)
}
const ruleFormRef = ref<InstanceType<typeof ElForm>>()

const internalInstance = getCurrentInstance(); //获取当前实例
// const route = internalInstance?.appContext.config.globalProperties.$route;
const {regEmail} = useRegular()
const router = useRouter();
const route = useRoute();
let codeText = ref("获取验证码")
let countdown: number = 60;
const setTime = () => {
  if (countdown == 0) {
    codeText.value = "获取验证码";
    countdown = 60; //60秒过后button上的文字初始化,计时器初始化;
    return;
  } else {
    codeText.value = countdown + "s";
    countdown--;
  }
  setTimeout(function () {
    setTime();
  }, 1000); //每1000毫秒执行一次
};
const getCode =  () =>{
  if(!regEmail(ruleForm.email)){
    ElMessage.warning("请输入邮箱")
    return
  }
  
  setTime()
  // getEmailCode({
  //   email:ruleForm.email
  // })
  // .then(()=>{
  //   ElMessage.success("发送成功")
  // })
}
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请验证密码'))
  } else if (value !== ruleForm.password) {
    callback(new Error("两次密码不一致!"))
  } else {
    callback()
  }
}
const rules = reactive({
     code: [{
      required: true,
      message: '请输入邮箱验证码',
      trigger: 'blur',
   }],
   username: [{
      required: true,
      message: '请输入名字',
      trigger: 'blur',
   }],
    email:[
      {
        required: true,
          type: 'email',
          message: '请输入邮箱地址',
          trigger: ['blur', 'change'],
        }
    ],
  password: [{ required: true, validator: validatePass, trigger: 'blur' }],
  checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }],
})
const ruleForm = reactive({
  username:"19939962786",
  checkPass:"123456",
  password:"123456",
  email:"229236940@qq.com",
  code:"JXUY2Q"
})
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
//       userinfoAddUser(ruleFormRef._value.model)
//       .then((res:any)=>{
//  emit('handleGologin',false)
//       })
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const handleCancel = () =>{
  window.close();
}
onMounted(() => {});
</script>

<style scoped lang="scss">
.register{
  // margin: 0 auto;
  // margin-top: 100px;
  // width: 600px;
  // padding: 30px;

    width:500px;
  position: relative;
  left: 0;
  top: 100px;
  padding: 34px;
  border-radius: 7px;
}
</style>
